<template>
	<view class="page_box">
		<view class="head_box"></view>
		<view class="content_box">
			<view class="detail-head">
				<view class="state-box x-f">
					<!-- <image class="state-img" src="/static/imgs/order_state1.png" mode=""></image> -->
					<text class="state-txt">{{ orderDetail.refund_status_name }}</text>
				</view>
			</view>
			<view class="detail-goods">
				<!-- 订单信息 -->
				<view class="order-list">
					<shopro-mini-card v-if="orderDetail.item" :type="'order'" :detail="orderDetail.item"></shopro-mini-card>
				</view>
			</view>
			<!-- 收货信息 -->
			<!-- <view class="notice-box" v-if="true">
				<view class="notice-box__head">商家收货地址</view>
				<view class="notice-box__content">
					<view class="x-f notice-item">
						<text class="title">收货人：</text>
						<text class="detail">{{ orderDetail.consignee }} {{ orderDetail.phone }}</text>
					</view>
					<view class="x-f notice-item">
						<text class="title">收货地址：</text>
						<text class="detail">{{ orderDetail.province_name }}{{ orderDetail.city_name }}{{ orderDetail.area_name }}{{ orderDetail.address }}</text>
					</view>
				</view>
			</view> -->
			<view class="notice-box">
				<view class="notice-box__head">退款信息</view>
				<view class="notice-box__content">
					<view class="notice-item x-f">
						<text class="title">退款原因：</text>
						<text class="detail">{{ orderDetail.refund_reason }}</text>
					</view>
					<view class="notice-item x-f">
						<text class="title">具体描述：</text>
						<text class="detail">{{ orderDetail.refund_note }}</text>
					</view>
					<view class="notice-item x-f">
						<text class="title">退款类型：</text>
						<text class="detail">{{ orderDetail.refund_method | format_refund_method }}</text>
					</view>
					<view class="notice-item--center x-f">
						<text class="title">退款编号：</text>
						<text class="detail">{{ orderDetail.refund_sn }}</text>
						<button class="cu-btn copy-btn" @tap="onCopy(orderDetail.refund_sn)">复制</button>
					</view>
					<view class="notice-item x-f">
						<text class="title">申请时间：</text>
						<text class="detail">{{ orderDetail.created_at }}</text>
					</view>
					
				</view>
			</view>
		</view>
		<view class="foot_box">
			<view class="btn-box x-f">
				<shRefundBtn v-if="orderDetail.id" :orderId="orderDetail.id" :orderStatus="orderDetail.refund_status" />
			</view>
		</view>
		<!-- 登录提示 -->
		<shopro-login-modal></shopro-login-modal>
	</view>
</template>

<script>
import shoproMiniCard from '@/components/shopro-mini-card/shopro-mini-card.vue';
import shRefundBtn from './children/sh-refund-btn.vue';
export default {
	components: {
		shoproMiniCard,
		shRefundBtn
	},
	data() {
		return {
			time: 0,
			orderDetail: {}
		};
	},
	onShow() {
		this.getOrderDetail();
	},
	onLoad() {},
	filters: {
		format_refund_method: function (value) {
			switch (value) {
				case 1:
					return "仅退款";
				case 2:
					return "退货/退款";
				default:
					return "未知错误";
			}	
		}
	},
	methods: {
		// 复制
		onCopy(code) {
			let that = this;
			uni.setClipboardData({
				data: code,
				success: function(data) {
					//#ifdef H5
					that.$tools.toast('已复制到剪切板');
					//#endif
				},
				fail: function(err) {},
				complete: function(res) {}
			});
		},
		// 订单详情
		getOrderDetail() {
			let that = this;
			that.$api('refund.detail', {
				id: that.$Route.query.id
			}).then(res => {
				if (res.code === 1) {
					that.orderDetail = Object.assign({}, res.data);
					// that.orderDetail.status = 'WAIT_BUYER_PAY' // 测试不同状态按钮样式
					// that.orderDetail.item[0].refund_status = '111' // 测试不同状态按钮样式
				}
			});
		}
	}
};
</script>

<style lang="scss">
.detail-head {
	background: linear-gradient(0deg, rgba(239, 196, 128, 1) 0%, rgba(248, 220, 165, 1) 100%) no-repeat;
	background-size: 100% 100%;

	.state-box {
		padding: 100rpx 40rpx;
		color: rgba(#fff, 0.9);
		display: flex;
			justify-content: center;
			align-items: center;
			text-align: center;
		.state-img {
			width: 60rpx;
			height: 60rpx;
			// background: #ccc;
			margin-right: 40rpx;
		}
		.state-txt {
			font-size: 40rpx;
		}
	}
}

.detail-goods {
	padding: 20rpx;
	background: #fff;
	margin-bottom: 20rpx;

	.order-list {
		.refund_msg {
			font-size: 28rpx;
			color: #999;
			flex: 1;
			text-align: left;
		}
		.order-bottom {
			background: #fff;
			padding-bottom: 20rpx;
			justify-content: flex-end;
			padding-top: 20rpx;
			.btn1 {
				width: 160rpx;
				height: 60rpx;
				border: 1rpx solid rgba(223, 223, 223, 1);
				border-radius: 30rpx;
				font-size: 26rpx;
				background: #fff;
				padding: 0;
				margin-right: 20rpx;
			}
			.btn2 {
				width: 160rpx;
				height: 60rpx;
				border: 1rpx solid rgba(213, 166, 90, 1) !important;
				border-radius: 30rpx;
				font-size: 26rpx;
				color: #d5a65a !important;
				padding: 0;
				background: #fff;
				margin-right: 20rpx;
			}
		}
	}
}
// 拼团项目
.group-box {
	background: #fff;
	padding: 40rpx 0;
	height: 250rpx;
	margin-bottom: 20rpx;
	.tip-box {
		font-size: 28rpx;

		.cuIcon-roundcheckfill {
			color: #ecbe60;
			font-size: 34rpx;
			margin-right: 20rpx;
		}
	}
	.title-box {
		font-size: 26rpx;
		font-weight: bold;
		color: #333;
		.group-num {
			color: #f8002c;
		}
		.count-down-tip {
			font-size: 24rpx;
			padding-left: 10rpx;
		}
		.time-box {
			font-size: 18rpx;
			.count-text {
				display: inline-block;
				background-color: #383a46;
				color: #fff;
				font-size: 18rpx;
				border-radius: 2rpx;
				padding: 0 5rpx;
				height: 28rpx;
				text-align: center;
				line-height: 28rpx;
				margin: 0 6rpx;
			}
		}
	}

	.group-people {
		.img-box {
			position: relative;
			margin-right: 20rpx;
			.tag {
				position: absolute;
				line-height: 36rpx;
				background: linear-gradient(132deg, rgba(243, 223, 177, 1), rgba(243, 223, 177, 1), rgba(236, 190, 96, 1));
				border-radius: 18rpx;
				padding: 0 10rpx;
				white-space: nowrap;
				font-size: 24rpx;
				color: #784f06;
				z-index: 2;
				top: -10rpx;
			}
			.avatar {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				background: #ccc;
			}
		}
	}
}

// 收货信息、订单信息。
.notice-box {
	background: #fff;
	margin-bottom: 20rpx;
	.notice-box__head {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		line-height: 80rpx;
		border-bottom: 1rpx solid #dfdfdf;
		padding: 0 25rpx;
	}
	.notice-box__content {
		padding: 25rpx;
		.self-pickup-box {
			width: 100%;
			.self-pickup--img {
				width: 200rpx;
				height: 200rpx;
				margin: 40rpx 0;
			}
		}
	}
	.notice-item--center {
		margin-bottom: 10rpx;
	}
	.notice-item,
	.notice-item--center {
		margin-bottom: 10rpx;
		align-items: flex-start;
		.title {
			font-size: 28rpx;
			color: #999;
			text-align: justify;
			text-align-last: justify;
			text-justify: distribute-all-lines;
			width: 140rpx;
		}

		.detail {
			font-size: 28rpx;
			color: #333;
			flex: 1;
		}
		.copy-btn {
			width: 120rpx;
			height: 50rpx;
			// border: 1rpx solid rgba(223, 223, 223, 1);
			// border-radius: 25rpx;
			padding: 0;
			background: #fff;
			color: #b38436;
			font-size: 26rpx;
			margin-left: 30rpx;
		}
	}
	.notice-item--center {
		align-items: center;
	}
}

.foot_box {
	width: 750rpx;
	min-height: 100rpx;
	background: rgba(255, 255, 255, 1);
	border: 1rpx solid rgba(238, 238, 238, 1);
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: center;
	.money-box {
		height: 60rpx;
		padding: 0 20rpx;
		.money-title {
			font-size: 26rpx;
			color: #999999;
		}
		.all-price {
			color: #333;
			font-size: 26rpx;
		}
	}
	.btn-box {
		justify-content: flex-end;
		.obtn1 {
			width: 160rpx;
			height: 60rpx;
			background: rgba(238, 238, 238, 1);
			border-radius: 30rpx;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: rgba(51, 51, 51, 1);
			margin-right: 20rpx;
			padding: 0;
		}
		.obtn2 {
			width: 160rpx;
			height: 60rpx;
			background: linear-gradient(90deg, rgba(233, 180, 97, 1), rgba(238, 204, 137, 1));
			box-shadow: 0px 7rpx 6rpx 0px rgba(229, 138, 0, 0.22);
			border-radius: 30rpx;
			margin-right: 20rpx;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: rgba(168, 112, 13, 0.9);
			padding: 0;
		}
	}
}
</style>
